<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="${createLinkTo(dir:'css', file:'main2.css')}" />
<title>Admin Page</title>
</head>

<body>
<calendar:resources lang="en" theme="blue2"/>
<div>
    <div align="center" class="header">
    <img src="${createLinkTo(dir:'images', file:'OptimumSol.gif')}" width="388" height="60" />
	<div class="divlogout"><g:link class="link1" controller="adminPage">Home</g:link><span class="link1style">&nbsp;|&nbsp;</span>
						   <g:link class="link1" controller="login" action="doLogout">Logout</g:link></div>
    </div>
<div>
<div class="content">
	<g:form action="${employee.id ? 'edit' : 'add'}" id="${employee?.id}">
		<g:hasErrors bean="${person}">
			<div class="errors">
				<g:renderErrors bean="${person}" as="list" />
			</div>
		</g:hasErrors>
		<g:hasErrors bean="${employee}">
			<div class="errors">
				<g:renderErrors bean="${employee}" as="list" />
			</div>
		</g:hasErrors>
		<table align="center" width="825px" border="0">
			<tr>
				<td valign="bottom" class="head1" colspan="3"><g:if test="${!employee.id}">Employee Registration</g:if><g:else>Update Employee</g:else>
				<p class="para1"><g:if test="${!employee.id}">Create new</g:if><g:else>Edit</g:else> employee record. Fields marked with (<span class="required">*</span>) are required</p>
				<hr class="hr1"/></td>
			</tr>
			<tr>
				<td width="275px" valign="top" rowspan="2">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td  class="tdheader1" colspan="2">Photo</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td align="center">
								<img src="${createLinkTo(dir:'images', file:'blankphoto.gif')}" width="200" height="126" /><br/>
								<a class="link1" href="#">Browse</a><span class="link1style">&nbsp;|&nbsp;</span><a class="link1" href="#">Remove</a><br/>
								<div style="position:relative; width:200px;">
									<p class="para1" align="justify">Accepted formats are JPEG, PNG, or GIF. The image will be displayed at a height of 100 pixels by 100 pixels. Please upload an actual picture of the employee. Please do not use company logos or other artwork. (file size should be less than 5MB)</p>
								</div>
							</td>
						</tr>
					</table>
				</td>
				<td width="275px" valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td  class="tdheader1" colspan="2">Personal Information</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td class="label1" width="65px">EmployeeId:</td>
							<td><g:textField class="textbox1" name="employee.emp_id" value="${employee?.emp_id}" /></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Title:</td>
							<td><g:textField class="textbox1" name="person.title" value="${fieldValue(bean:person, field:'title')}" /></td>
						</tr>
						<tr>
							<td class="label1"><span class="required">*&nbsp;</span>Last Name:</td>
							<td><g:textField class="textbox1" name="person.lastName" value="${fieldValue(bean:person, field:'lastName')}" /></td>
						</tr>
						<tr>
							<td class="label1"><span class="required">*&nbsp;</span>First Name:</td>
							<td><g:textField class="textbox1" name="person.firstName" value="${fieldValue(bean:person, field:'firstName')}" /></td>
						</tr>
						<tr>
							<td class="label1">Middle Name:</td>
							<td><g:textField class="textbox1" name="person.middleName" value="${fieldValue(bean:person, field:'middleName')}" /></td>
						</tr>
						<tr>
							<td class="label1"><span class="required">*&nbsp;</span>Sex:</td>
							<td class="select1"><g:select	
												name="person.gender" 
												from="${['Male','Female']}" 
												keys="${['M','F']}"
												noSelection="['null':'-- No selection --']"										  
												value="${fieldValue(bean:person, field:'gender')}" /></td>
						</tr>
						<tr>
							<td class="label1">Birthday:</td>
							<td class="select1">
								<calendar:datePicker name="person.dateOfBirth" value="${person?.dateOfBirth}" dateFormat="%d/%m/%Y"/>
							</td>
						</tr>
						<tr>
							<td class="label1">Nationality:</td>
							<td class="select1"><g:select
												name="person.nationality.id"
											    optionKey="id"
												optionValue="nationality"
												from="${nationalities}"
												noSelection="['null':'-- No selection --']"
												value="${person?.nationality?.id}" /></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Residential Status:</td>
							<td class="select1"><g:select
									name="employee.residentialTypes.id"
									optionKey="id"
									optionValue="residenceTypeDesc"
									from="${residenceTypes}"
									noSelection="['null':'-- No selection --']"
									value="${employee?.residentialTypes?.id}"/></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Passport Number:</td>
							<td><g:textField class="textbox1" name="person.passportNumber" value="${fieldValue(bean:person, field:'passportNumber')}" /></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Social Security Number:</td>
							<td><g:textField class="textbox1" name="person.socialSecurityNumber" value="${fieldValue(bean:person, field:'socialSecurityNumber')}" /></td>
						</tr>
						<tr><td height="10px"/></tr>
					</table>					
				</td>
				<td width="275px" valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td  class="tdheader1" colspan="2">Job Details</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td class="label1">Chinese First Name:</td>
							<td><g:textField class="textbox1" name="person.chineseFirstName" value="${fieldValue(bean:person, field:'chineseFirstName')}" /></td>
						</tr>
						<tr>
							<td class="label1">Chinese Last Name:</td>
							<td><g:textField class="textbox1" name="person.chineseLastName" value="${fieldValue(bean:person, field:'chineseLastName')}" /></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Cost Center:</td>
							<td class="select1"><g:select
									name="employee.empCostCenter.id"
									optionKey="id"
									optionValue="empCostCenterName"
									from="${costCenters}"
									noSelection="['null':'-- No selection --']"
									value="${employee?.empCostCenter?.id}"/></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Notice Period:</td>
							<td><g:textField class="textbox1" name="employee.noticePeriod" value="${fieldValue(bean:employee, field:'noticePeriod')}" /></td>
						</tr>
						<tr>
							<td class="label1" width="65px">Hold Salary:</td>
							<g:if test="${fieldValue(bean:employee, field:'holdSalary') == 1}">
								<td><g:checkBox class="checkbox1" name="employee.holdSalary" value="${true}" /></td>
							</g:if>
							<g:else>
								<td><g:checkBox class="checkbox1" name="employee.holdSalary" value="${false}" /></td>
							</g:else>
						</tr>
						<tr>
							<td class="label1">Status:</td>
							<td class="select1" width="65px"><g:select
									name="employee.statusCode.id"
									optionKey="id"
									optionValue="description"
									from="${statusCodes}"
									noSelection="['null':'-- No selection --']"
									value="${employee?.statusCode?.id}"/></td>
						</tr>
						<tr>
							<td class="label1">Hire Date:</td>
							<td class="select1" width="65px">
								<calendar:datePicker name="employee.hireDate" value="${employee?.hireDate}" dateFormat="%d/%m/%Y"/>
							</td>
						</tr>
						<tr>
							<td class="label1">End Date:</td>
							<td class="select1" width="65px">
								<calendar:datePicker name="employee.endDate" value="${employee?.endDate}" dateFormat="%d/%m/%Y"/>
							</td>
						</tr>
						<tr>
							<td class="label1">Resignation Date:</td>
							<td class="textbox1" width="65px">
								<calendar:datePicker name="employee.resignationDate" value="${employee?.resignationDate}" dateFormat="%d/%m/%Y"/>
							</td>
						</tr>
						<tr><td height="10px"/></tr>
					</table>
				</td>
			</tr>
			<tr>
				<td valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td  class="tdheader1" colspan="2">Bank Details</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td class="label1" width="65px">Bank Account:</td>
							<td><g:textField class="textbox1" name="bankDetails.bankAccountNum" value="${fieldValue(bean:bankDetails, field:'bankAccountNum')}" /></td>
						</tr>
						<tr>
							<td class="label1">Bank Name:</td>
							<td><g:textField class="textbox1" name="bankDetails.bankName" value="${fieldValue(bean:bankDetails, field:'bankName')}" /></td>
						</tr>
						<tr>
							<td class="label1">Bank Code:</td>
							<td><g:textField class="textbox1" name="bankDetails.bankCode" value="${fieldValue(bean:bankDetails, field:'bankCode')}" /></td>
						</tr>
						<tr><td height="10px"/></tr>
					</table>
				</td>
				<td valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td  class="tdheader1" colspan="2">Contact Information</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td class="label1" width="65px">Mobile:</td>
							<td><g:textField class="textbox1" name="contact.mobile" value="${fieldValue(bean:contact, field:'mobile')}" /></td>
						</tr>
						<tr>
							<td class="label1">Phone 1:</td>
							<td><g:textField class="textbox1" name="contact.phone1" value="${fieldValue(bean:contact, field:'phone1')}" /></td>
						</tr>
						<tr>
							<td class="label1">Phone 2:</td>
							<td><g:textField class="textbox1" name="contact.phone2" value="${fieldValue(bean:contact, field:'phone2')}" /></td>
						</tr>
						<tr>
							<td class="label1">Fax:</td>
							<td><g:textField class="textbox1" name="contact.fax" value="${fieldValue(bean:contact, field:'fax')}" /></td>
						</tr>
						<tr>
							<td class="label1">Email:</td>
							<td><g:textField class="textbox1" name="contact.email" value="${fieldValue(bean:contact, field:'email')}" /></td>
						</tr>
						<tr><td height="10px"/></tr>
					</table>
				</td>
			</tr>
			<tr>
				<td valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td align="center">
								<img src="${createLinkTo(dir:'images', file:'captcha.png')}" width="152" height="37" />
							</td>
						</tr>
						<tr>
							<td align="center">
								<div style="position:relative; width:152px;">
									<p class="para1">Type the characters you see in the picture above.</p>
								</div>
							</td>
						</tr>
						<tr><td align="center"><input type="textfield" class="textboxdef" name="captcha" value="" /></td></tr>
					</table>
				</td>
				</td>
				<td valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td class="tdheader1" colspan="2">Present Address</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td class="label1" width="65px">Street:</td>
							<td><g:textField class="textbox1" name="presAddr.street" value="${fieldValue(bean:presAddr, field:'street')}" /></td>
						</tr>
						<tr>
							<td class="label1">City:</td>
							<td><g:textField class="textbox1" name="presAddr.city" value="${fieldValue(bean:presAddr, field:'city')}" /></td>
						</tr>
						<tr>
							<td class="label1">Province:</td>
							<td><g:textField class="textbox1" name="presAddr.province" value="${fieldValue(bean:presAddr, field:'province')}" /></td>
						</tr>
						<tr>
							<td class="label1">Zip Code:</td>
							<td><g:textField class="textbox1" name="presAddr.zipcode" value="${fieldValue(bean:presAddr, field:'zipcode')}" /></td>
						</tr>
						<tr>
							<td class="label1">Country:</td>
							<td class="select1"><g:select
												name="presAddr.country.id"
											    optionKey="id"
												optionValue="countryName"
												from="${countries}"
												noSelection="['null':'-- No selection --']"
												value="${presAddr?.country?.id}"/></td>
						</tr>
						<tr><td height="10px"/></tr>
					</table>
				</td>
				<td valign="top">
					<table width="100%" class="tableForm" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td class="tdheader1" colspan="2">Permanent Address</td>
						</tr>
						<tr><td height="10px"/></tr>
						<tr>
							<td class="label1" width="65px">Street:</td>
							<td><g:textField class="textbox1" name="permAddr.street" value="${fieldValue(bean:permAddr, field:'street')}" /></td>
						</tr>
						<tr>
							<td class="label1">City:</td>
							<td><g:textField class="textbox1" name="permAddr.city" value="${fieldValue(bean:permAddr, field:'city')}" /></td>
						</tr>
						<tr>
							<td class="label1">Province:</td>
							<td><g:textField class="textbox1" name="permAddr.province" value="${fieldValue(bean:permAddr, field:'province')}" /></td>
						</tr>
						<tr>
							<td class="label1">Zip Code:</td>
							<td><g:textField class="textbox1" name="permAddr.zipcode" value="${fieldValue(bean:permAddr, field:'zipcode')}" /></td>
						</tr>
						<tr>
							<td class="label1">Country:</td>
							<td class="select1"><g:select
												name="permAddr.country.id"
											    optionKey="id"
												optionValue="countryName"
												from="${countries}"
												noSelection="['null':'-- No selection --']"
												value="${permAddr?.country?.id}"/></td>
						</tr>
						<tr><td height="10px"/></tr>
					</table>
				</td>
			</tr>
			<tr>
				<td align="right" colspan="3">
				<hr class="hr1"/>
				<input class="button1" type="submit" value="Save" />
				<input class="button1" type="reset"  value="<g:if test="${!employee.id}">Clear</g:if><g:else>Undo Changes</g:else>" />
				</td>
			</tr>
		</table>

	</g:form>
</div>
</body>
</html>
